<template>
	<view class="cs-history">
		<view class="cs-history-x">
			<view class="cs-history-tc">
				<view class="cr">历史记录</view>
				<view class="cs-histroy-tc-clear" @click="clearHistory">清空历史</view>
			</view>
			<view class="cs-history-li" v-for="(item,index) in historyList" :key='index' @click="on_showHistoryUser(item)">
				<text>{{item}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: uni.getStorageSync('searchCache') // 历史记录列表
			}
		},
		methods: {
			// 清空历史记录
			clearHistory() {
				uni.setStorage({
					key: 'searchCache',
					data: []
				})
				// 虽然清空了缓存，还是需要重新获取当前的历史记录，确保能够实时更新
				this.historyList = uni.getStorageSync('searchCache')
			},
			// 点击历史列表的某个名称进去
			on_showHistoryUser(history_name) {
				this.$emit('on_showHistoryUser', history_name)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cs-history{
		margin: 170upx 30upx 40upx 30upx;
	}
	.cs-history-tc{
		display: flex;
		justify-content: space-between;
		font-size: 26upx;
		.cr{
			color: #999999;
		}
	}
	.cs-histroy-tc-clear{
		color: #FF9900;
	}
	.cs-history-li{
		padding: 20upx 0;
		color: #333333;
		border-bottom: 1px solid #E5E5E5;
	}
</style>
